<script setup lang="ts">
import Map from "@/components/Map.vue";
import Radar from "@/components/Radar.vue";
import {computed, ref} from "vue";
import HeatTopTen from "@/components/HeatTopTen.vue";
import Scatter from "@/components/Scatter.vue";
import WordCloudCharts from "@/components/WordCloudCharts.vue";

const name = ref('长隆野生动物世界')
const location = ref([113.31790230542546,23.035109806622547])
const newLocation = computed(() => [location.value[0] + 0.0022, location.value[1] - 0.0008])
const onClick = (n: string) => {
  console.log(n)
  name.value = n
}
</script>

<template>
  <div class="content">
    <div class="row">
      <heat-top-ten @click="onClick"></heat-top-ten>
      <Map @click="onClick" :location="newLocation" :name="name"></Map>
      <radar :name="name"></radar>
    </div>
    <div class="row">
      <scatter></scatter>
      <word-cloud-charts></word-cloud-charts>
    </div>
  </div>
</template>

<style scoped>
.content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: rgba(30, 30, 45, 1);
}

.row {
  width: 100%;
  height: 50vw;
  display: flex;
  flex-direction: row;
}
</style>